@import "variables";

.admonition {
  padding: $width-gap-half $width-gap-double $width-gap-half 0;
  margin-top: $width-gap-half;
  margin-bottom: $width-gap;
  border-radius: $width-border-radius;

  p:not(:first-child) {
    margin: 0.5em 1em 0.5em 1em;
    font-size: $font-size-small;
  }

  .admonition-title {
    margin-top: 0;
    font-weight: $font-weight-bold;
    padding: 0.1em 0 0.1em 0.5em;

    &::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: top;
      margin-top: 4px;
      margin-right: 2px;
    }
  }

  &.danger, &.error {
    color: $color-danger;
    background-color: $color-danger-faded;

    .admonition-title::before {
      background: url("images/error-warning-fill.svg") no-repeat;
      background-size: contain;
    }
  }

  &.warning, &.caution, &.attention {
    color: $color-warning;
    background-color: $color-warning-faded;

    .admonition-title::before {
      color: $color-warning;
      background: url("images/alert-fill.svg") no-repeat;
      background-size: contain;
    }
  }

  &.important, &.note {
    color: $color-success;
    background-color: $color-success-faded;

    .admonition-title::before {
      background: url("images/information-fill.svg") no-repeat;
      background-size: contain;
    }
  }

  &.hint, &.tip {
    color: $color-info;
    background-color: $color-info-faded;

    .admonition-title::before {
      background: url("images/lightbulb-line.svg") no-repeat;
      background-size: contain;
    }
  }
}